<template>
  <div class="table-pro">
    <!-- 按钮组 -->
    <slot name="button-group">
      <div class="btn-group" style="margin-bottom: 12px;">
        <el-button type="primary" size="small">添加</el-button>
        <el-button type="danger" size="small">批量删除</el-button>
        <el-button type="default" size="small" @click="handleExport">导出Excel</el-button>
      </div>
    </slot>

    <!-- 表格 -->
    <el-table
      :data="dataSource"
      style="width: 100%; margin-bottom: 12px;"
      border
      stripe
    >
      <!-- 循环列表渲染表格中的各列 -->
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        v-bind="column"
      >
        <template v-if="column.type === 'slot'" #default="scope">
          <!-- 插槽 -->
          <!-- 插槽名称与列定义的prop一致 -->
          <slot :name="column.prop" v-bind="scope" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
      background
      layout="total, prev, pager, next, sizes, jumper"
      :total="total"
      @change="handleTurnPage"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref} from 'vue'
import { utils, writeFileXLSX } from 'xlsx'

// 定义属性类型
interface Props {
  columns: ITableColumn[] // 表格列定义数据
  requestApi: Function // 请求数据方法
}

// 组件接收的属性
const props = defineProps<Props>()

// 定义状态数据，用于保存表格中的数据源
const dataSource = ref<any[]>([])
// 总记录数
const total = ref(0)
// 当前页码
const page = ref(1)
// 每页记录数
const pageSize = ref(10)
/**
 * 加载表格中的数据
 */
const loadData = async() => {
  const result = await props.requestApi({
    page: page.value,
    pageSize: pageSize.value
  })
  // 请求数据
  dataSource.value = result.list
  total.value = result.total
  page.value = result.page
  pageSize.value = result.pageSize
}
loadData()

/**
 * 处理翻页效果
 */
const handleTurnPage = (_currPage: number, _pageSize: number) => {
  page.value = _currPage
  pageSize.value = _pageSize
  // 翻页
  loadData()
}

/**
 * 导出数据
 * excel: 工作簿(workbook)、工作表(worksheet)
 */
const handleExport = () => {
  // 将需要导出的数据转换为工作表中要保存的数据
  const ws = utils.json_to_sheet(dataSource.value)
  // 创建工作簿
  const wb = utils.book_new()
  // 将工作表添加到工作簿中
  utils.book_append_sheet(wb, ws, '工作表')
  // 将工作簿中的数据写入到文件中
  writeFileXLSX(wb, new Date().toISOString() + '.xlsx')
}
</script>

<style lang="scss" scoped>
.table-pro {
  padding: 12px;
}
</style>
